<template>
  <div id="app" class="div">
    <img id="bg" src="public/img" />
    <input class="input" v-model="address">
    <el-button @click="getLocation"
    type="primary">
      查询街道</el-button>
    <div>{{ result1 }}</div>
     <div>{{ result2 }}</div>
  </div>
</template>

<script>
import { getTownApi } from '@/api/searchtown';
import { getCoordinatesApi } from '@/api/searchtown';
export default {
  name: 'App',
  components: {},
  data() {
    return {
      address: '',
      addressData: {},
      latlng: '',
      result1: '',
      result2: ''
    }
  },
  methods: {
    async getLocation() {
      await getCoordinatesApi(this.address,'JSON','4e0c94ad74011811ac71fcaed13f9e09'      
      )
      .then(res => this.addressData = res.data)
      console.log(this.addressData);
      this.latlng = this.addressData.geocodes[0].location
      console.log(this.latlng);

      await getTownApi('JSON',this.latlng,'4e0c94ad74011811ac71fcaed13f9e09',1000,'all'
      )
      // .then(res => this.result = res.data.regeocode.addressComponent.township)
  .then(res => (this.result1 = res.data.regeocode.addressComponent.district,
        this.result2 = res.data.regeocode.addressComponent.township))
      console.log(this.result1,this.result2);


    }
  }
}
</script>

<style lang="css" scoped>
.input{
  width:300px;
  height: 100px;
 text-align:center
}
.div{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
